<template>
  <div>
      <!--头部-->
      <div id="topDiv">
          <el-row>
            <el-col span=6>
                <br><br>
                <el-avatar :size="150" :src="require('../../img'+$store.state.doctor.tDoctorInfo.headImg)"></el-avatar>
            </el-col>
            <el-col span=18 id="contentDiv">
                <el-row>
                    <el-col span="6">
                        <h3>{{$store.state.doctor.name}}</h3>
                    </el-col>
                    <el-col span="4">
                        <br>
                        <div id="dutyDiv">{{$store.state.doctor.tDoctorInfo.duty}}</div>
                    </el-col>
                </el-row><br><br>
                <el-row>
                    <el-col span="4">
                        <span>{{$store.state.doctor.tDoctorInfo.hospital}}</span>
                    </el-col>
                    <el-col span="5">
                        <span>{{$store.state.doctor.tClinicDepartment.name}}</span>
                    </el-col>
                </el-row><br><br>
                <el-row>
                    <el-col span="16" >
                        <span >擅长：{{$store.state.doctor.tDoctorInfo.speciality}}</span>
                    </el-col>
                    
                </el-row>
                <el-row>
                    <el-col offset="20" span="3">
                        <router-link tag="el-button" to="/InformationOnline" type="success" plain>在线咨询</router-link>
                    </el-col>
                </el-row>
            </el-col>
          </el-row>
      </div><br>
      <!--主内容-->
      <div id="mainDiv">
          <el-row>
              <el-col span="18">
                  <div id="questDiv">
                        <div v-for="item in 4" :key="item" >
                        <!--<pre>-->
                            <h4 style="font-size:20px">熬夜的危害</h4>
                            <span>
                                经常熬夜对人身体的危害是非常大的，首先会导致人出现皮肤上的改变，
                                比如皮肤出油严重、痤疮、肤色暗沉等症状。除此之外，
                                还会引起人内分泌失调的情况，内分泌失调是导致人肥胖、脱发的重要原因，
                                所以熬夜是会导致人出现体重增加以及脱发等症状的
                            </span>
                        <!--</pre>-->
                    </div>
                  </div>
                
              </el-col>
              <el-col span="5" offset="1">
                  <!--简介-->
                  <div class="hhDiv">

                      <h4>{{$store.state.doctor.name}}的简介</h4>
                        <div id="remarkDiv">
                            <label>
                                {{$store.state.doctor.tDoctorInfo.remark}}
                            </label>
                        </div>
                        <div class="doctorDiv" >

                            <el-image style="width:100px;padding-top:80px" :src="require('../../img/littleIcon/two.jpg')"></el-image>
                            <br>
                            <span>微信扫一扫在线咨询</span><br><br>
                            <label style="color:grey;font-size:14px">专业医生为你解答</label><br><br>
                        </div>
                  </div>
                  
              </el-col>
          </el-row>
            
      </div>
      <InformationBottom></InformationBottom>
  </div>
</template>

<script>
import InformationBottom from '../../components/healthyInformation/InformationBottom.vue'

export default {
     components:{
            InformationBottom 
    },
}
</script>

<style>
    #topDiv{
        background-color:rgb(89, 170, 236);
        height: 240px;
        color: white;
    }
    #dutyDiv{
        height: 27px;
        color: yellow;
        border: 1px solid yellow;
        text-align: center;
        border-radius: 4px;
    }
    #contentDiv{
        text-align: left;
        padding-left: 0px;
    }
    #questDiv{
        /*width: 1000px;*/
        text-align: left;
        padding-left: 0px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
        
    }
    .hhDiv{
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }
    #remarkDiv{
        text-align: left;
        padding-left: 20px;
        padding-right: 20px;
    }
  
</style>